import React from 'react';
import { Form, Input, Button, Space, Select, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const Search = (props: any) => {
  const [form] = Form.useForm();
  const { callbackValue, loading } = props;

  const onFinish = (values: any) => {
    callbackValue(values);
  };

  return (
    <Form
      style={{ display: 'flex' }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >
      <Space>
        <Form.Item name="displayName" style={{ margin: 0, width: 250 }}>
          <Input
            style={{ width: 250 }}
            allowClear
            placeholder={'请输入文件名'}
          />
        </Form.Item>
        <Form.Item style={{ margin: 0 }}>
          <Space>
            <Tooltip title="搜索">
              <Button
                disabled={loading}
                type="primary"
                htmlType="submit"
                icon={<SearchOutlined />}
              />
            </Tooltip>
          </Space>
        </Form.Item>
      </Space>
    </Form>
  );
};

export default Search;
